<template>
  <div class="pagination">
    <!-- 1.当前页为1时，不能点击上一页  2.点击上一页，当前页pageNo减一 -->
    <button 
      :disabled="this.pageNo===1"
      @click="$emit('update:pageNo',pageNo-1)"
     >上一页
    </button>
    <!-- 1.当start为1时隐藏-->
    <button 
      v-if="startEnd.start>1"
      @click="$emit('update:pageNo',1)"
    >1</button>
    <button v-if="startEnd.start>2">···</button>


    <button v-for="page in pages" :key="page">{{page}}</button>


    <button v-if="startEnd.end<totalPages-1">···</button>
    <button v-if="startEnd.end<totalPages">{{totalPages}}</button>
    <button :disabled="pageNo===totalPages" @click="$emit('update:pageNo',pageNo+1)">下一页</button>

    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  //pageNo当前页  total商品总数   totalPages总页数  continuePage连续展示页码长度
  props:["pageNo","total","totalPages","continuePage"],
  computed:{
    startEnd(){
      const {pageNo,totalPages,continuePage} = this;
      let start,end = 0;  
      //1.如果总页数totalPages小于等于连续页码展示长度continuePage；则直接赋值
      if(totalPages<=continuePage){
        start = 1;
        end = totalPages
      }else{
        //2.totalPages大于continuePage时
        start = pageNo - (continuePage-1)/2 
        end = pageNo + (continuePage-1)/2
      }

      //3.start不能小于1，end不能超过总页数
      if(start<1){
        start = 1;
        end = continuePage
      }
      if(end>totalPages){
        end = totalPages;
        start = totalPages - continuePage + 1;
      }

      return {start,end}
    },
    pages(){
      let arrs = [];
      for(let i = this.startEnd.start; i<=this.startEnd.end;i++){
        arrs.push(i)
      }
      return arrs
    }
  }
};
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>
